<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JSON对话框</title>
    <style>
        html {
            --color-bg-1: #fff;
            --color-text-1: var(--color-neutral-10);
            --color-neutral-10: rgb(var(--gray-10));
            --gray-10: 29, 33, 41;
            --primary-6: var(--arcoblue-6);
            --arcoblue-6: 22, 93, 255;
            --color-fill-2: var(--color-neutral-2);
            --color-neutral-2: rgb(var(--gray-2));
            --gray-2: 242, 243, 245;
            --color-neutral-4: rgb(var(--gray-4));
            --gray-4: 201, 205, 212;
            --color-fill-3: var(--color-neutral-3);
            --color-neutral-3: rgb(var(--gray-3));
            --gray-3: 229, 230, 235;
            --color-text-4: var(--color-neutral-4);
            --color-text-2: var(--color-neutral-8);
            --color-neutral-8: rgb(var(--gray-8));
            --gray-8: 78, 89, 105;
            --color-text-3: var(--color-neutral-6);
            --color-neutral-6: rgb(var(--gray-6));
            --gray-6: 134, 144, 156;
        }

        html[arco-theme=dark] {
            --color-bg-1: #000000;
            --color-text-1: #ffffff;
        }

        .copy {
            position: fixed;
            top: 10px;
            right: 24px;
        }

        #code {
            font-size: 18px;
            line-height: 24px;
            padding: 14px;
            margin: 0;
            font-family: Consolas, Menlo, Courier, monospace;
        }

        .container {
            background-color: var(--color-bg-1);
            color: var(--color-text-1);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: auto;
        }

        .arco-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            font-weight: 400;
            line-height: 1.5715;
            white-space: nowrap;
            outline: none;
            cursor: pointer;
            transition: all .1s cubic-bezier(0, 0, 1, 1);
            -webkit-appearance: none;
            user-select: none;
            font-size: 16px;
        }

        .arco-btn-text, .arco-btn-text[type=button], .arco-btn-text[type=submit] {
            color: rgb(var(--primary-6));
            background-color: transparent;
            border: 1px solid transparent;
            padding: 6px 12px;
        }

        .arco-btn-text:hover, .arco-btn-text[type=button]:hover, .arco-btn-text[type=submit]:hover {
            color: rgb(var(--primary-6));
            background-color: var(--color-fill-2);
            border-color: transparent
        }

        .arco-btn-text:focus-visible, .arco-btn-text[type=button]:focus-visible, .arco-btn-text[type=submit]:focus-visible {
            box-shadow: 0 0 0 .25em var(--color-neutral-4)
        }

        .arco-btn-text:active, .arco-btn-text[type=button]:active, .arco-btn-text[type=submit]:active {
            color: rgb(var(--primary-6));
            background-color: var(--color-fill-3);
            border-color: transparent
        }
    </style>
</head>
<body>
<div spellcheck="false" class="container">
<pre class="container hljs language-json" id="code">
</pre>
</div>
<div class="copy">
    <button class="arco-btn arco-btn-text">复制</button>
</div>
</body>
<script>
    if (window.preload) {
        window.preload.receiveMsg(callback)
    } else if (window.__TAURI__) {
        // TODO: 此处有bug
        window.__TAURI__.event.once("data", ({event, payload}) => {
            console.log("接收到信息")
            console.log(event, payload);
            callback(payload);
        });
    }

    /**
     * 回调函数
     * @param msg 消息
     */
    function callback(msg) {
        const {html, theme, title, isDark, json} = msg;
        const link = document.createElement("link");
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = `./highlight.js/styles/${theme}.css`
        document.head.appendChild(link);
        document.getElementById("code").innerHTML = html;
        if (title) {
            document.title = title;
        }

        if (isDark) {
            // 设置为暗黑主题
            document.body.setAttribute('arco-theme', 'dark');
        } else {
            // 恢复亮色主题
            document.body.removeAttribute('arco-theme');
        }
        document.querySelector('.copy button').addEventListener('click', function () {
            // 复制
            window.preload.copyText(json);
            window.preload.showNotification("已成功复制到剪切板");
        });
    }
</script>
</html>
